<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Progressbars</h3>
</div>
<div class="p-md">
  <div class="row">
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Colors</h5>
      <div class="progress">
        <div class="progress-bar progress-bar-primary" style="width:60%">60%</div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-info" style="width:30%">30%</div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:40%">40%</div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-warning" style="width:30%">30%</div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width:20%">20%</div>
      </div>
      <h5 class="no-margin m-b">Size</h5>
      <div class="progress progress-sm">
        <div class="progress-bar progress-bar-primary" style="width:40%">40%</div>
      </div>
      <div class="progress progress-sm">
        <div class="progress-bar progress-bar-info" style="width:30%">30%</div>
      </div>
      <div class="progress progress-xs">
        <div class="progress-bar progress-bar-success" style="width:50%"></div>
      </div>
      <div class="progress progress-xs">
        <div class="progress-bar progress-bar-warning" style="width:20%"></div>
      </div>
      <div class="progress progress-xxs">
        <div class="progress-bar progress-bar-danger" style="width:15%">15%</div>
      </div>
    </div>
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Striped</h5>
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-primary" style="width:40%">40%</div>
      </div>
      <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-info" style="width:30%">30%</div>
      </div>
      <h5 class="no-margin m-b">Stack</h5>
      <div class="progress">
        <div class="progress-bar progress-bar-info" style="width:20%">20%</div>
        <div class="progress-bar progress-bar-success" style="width:30%">30%</div>
        <div class="progress-bar progress-bar-warning" style="width:15%">15%</div>
      </div>
      <h5 class="no-margin m-b">No radius</h5>
      <div class="progress progress-striped no-radius">
        <div class="progress-bar progress-bar-success" style="width:50%">50%</div>
      </div>
      <div class="progress progress-striped progress-sm no-radius">
        <div class="progress-bar progress-bar-warning" style="width:20%">20%</div>
      </div>
      <div class="progress progress-striped progress-xs no-radius">
        <div class="progress-bar bg-dark" style="width:15%"></div>
      </div>
    </div>
  </div>
</div>